<!DOCTYPE html>
<html class="ui-page-login">

	<head>
		<meta charset="utf-8">
		<meta http-equiv="Access-Control-Allow-Origin" content="*">
		<meta http-equiv="content-security-policy">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<!-- build:css /css/main.css -->
    	<link href="/css/mui.css" rel="stylesheet" />
		<link href="/css/iconfont.css" rel="stylesheet" />
		<link href="/css/common.css" rel="stylesheet" />
    	<!-- endbuild -->
		<style>
			.mui-content{height: auto;}
			
			.mui-table-view-cell>a:not(.mui-btn){white-space:inherit;}
			
			
			
			.mui-table-view .mui-media, .mui-table-view .mui-media-body{font-size:13px;}
			p{font-size:12px;}
		</style>

	</head>

	<body>
		<header class="mui-bar mui-bar-nav u-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">商品评论</h1>
		</header>
		
		<div class="mui-scroll-wrapper" style="margin-top:40px;" id="pullrefresh">
			<div class="mui-scroll" >
				<ul class="mui-table-view" id="comments">
					
                    <li class="mui-table-view-cell mui-media">
						<a href="#">
							<div class="mui-media-body">
								A**望：<div style="float:right;"><span class="mui-icon mui-icon-star ed"></span><span class="mui-icon mui-icon-star ed"></span><span class="mui-icon mui-icon-star ed"></span><span class="mui-icon mui-icon-star"></span><span class="mui-icon mui-icon-star"></span></div>
								<p>很好很好很好！买了几次了。</p>
								<p style="text-align: right;" id="times">2015-05-22 15:36:33</p>
							</div>
						</a>
					</li>
					<li class="mui-table-view-cell mui-media">
						<a href="#">
							<div class="mui-media-body">
								A**望：<div style="float:right;"><span class="mui-icon mui-icon-star ed"></span><span class="mui-icon mui-icon-star ed"></span><span class="mui-icon mui-icon-star ed"></span><span class="mui-icon mui-icon-star"></span><span class="mui-icon mui-icon-star"></span></div>
								<p style="width:100%;margin-top:8px;">很好很好很好！买了几次了。</p>
								<p style="text-align: right;" id="times">2015-05-22 15:36:33</p>
							</div>
						</a>
					</li>
					<li class="mui-table-view-cell mui-media">
						<a href="#">
							<div class="mui-media-body">
								A**望：<div style="float:right;"><span class="mui-icon mui-icon-star ed"></span><span class="mui-icon mui-icon-star ed"></span><span class="mui-icon mui-icon-star ed"></span><span class="mui-icon mui-icon-star"></span><span class="mui-icon mui-icon-star"></span></div>
								<p style="width:100%;margin-top:8px;">很好很好很好！买了几次了。</p>
								<p style="text-align: right;" id="times">2015-05-22 15:36:33</p>
							</div>
						</a>
					</li>
				
				</ul>
			</div>
		</div>
		
		 <!-- build:js /js/vendor.js -->
		<script src="/js/mui.min.js"></script>
		 <!-- bower:js -->
		 <script src="/bower_components/mockjs/dist/mock.js"></script>
		 <script src="/bower_components/zepto/zepto.js"></script>
		 <script src="/bower_components/Zepto-Cookie/zepto.cookie.js"></script>
		 <!--  endbower -->
    <!-- endbuild -->
    <!-- build:js /js/main.js -->
<script src="/js/common.js"></script>
<script src="/js/app.js"></script>
	  <!-- endbuild -->	
		<script>
			var goodsId = getQueryString('goodsId');
			var page = 1;
			(function(mui, doc) {
				mui.init({
					statusBarBackground: '#ffffff'
					,pullRefresh : {
					    container:"#pullrefresh"
					    ,up : {
					    	contentup: "上拉加载",
					      	contentrefresh : "正在加载...",
					      	contentnomore:'没有更多数据',
					      	callback :function(){getGoodsComment();}
					    }
					}
				});
				var getGoodsComment = function(){
					loadingShow();
					var flag = false;
					$.ajax(__BATE__ + 'api/comment', {goodsId:goodsId, page:page}, function(data){
						if(data.status == 0 && data.result != null){
							++page;
							var data = data.result;
							var htmls = '';
							for(var k in data){
								var html = '<li class="mui-table-view-cell mui-media"><a href="javascript: void(0);"><div class="mui-media-body">'+data[k].username+'<p style="width:100%;margin-top:6px;">'+data[k].content+'</p><p style="text-align: right;">'+data[k].add_time+'</p></div></a></li>';
								
								var starhtmled = '';
								var starhtml = '';
								var starlen = 5;
								var starCount = data[k].rank;
								for(var i = 0; i < starCount; i++){
									starhtmled += '<span class="mui-icon mui-icon-star ed">';

								}
								for(var i = 0; i < starlen-starCount; i++){
									starhtmled += '<span class="mui-icon mui-icon-star">';
								}
								starhtml = '<div style="float:right;">'+starhtmled+'</div>';
								
								html = html.replace('#star#', starhtml);
								//$('.hot-product-list').append(html);
								htmls += html;
							}
							var oldHtml = document.getElementById("comments").innerHTML;
							document.getElementById("comments").innerHTML = oldHtml+htmls;
							
						}else{	
							flag = true;
						}
						
						try{
							mui('#pullrefresh').pullRefresh().endPullupToRefresh(flag);
						}catch(e){}
						
					});
				};
				mui.ready(function() {
					getGoodsComment();
					//doc.getElementById("contentInfo").innerHTML = selfinfo.para;
				});
			}(mui, document));
		</script>
	</body>
</html>
